<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动流</title>
</head>
<style>
    /*
     浮动流：通过float属性设置标签的浮动流
             元素的流加载一旦设置为浮动流，那么该元素就不再按照标准流方式进行加载
             浮动流的加载方式，在自己的原来的行号上进行向左或向右进行浮动，浮动的元素会紧邻
             浮动流后面的元素如果是标准流 那么就会相应的顶上来，但是如果标准流中有内容，内容不会带上来(该位置完全空出来才会随着标签一块上来)
             如果是浮动流内容和标签都会上来紧邻前面浮动元素向左或向右移动
             浮动流中不分行标签和快标签，都可以设置宽高属性值，都是在一行上进行浮动，满了就换行浮动
             clear属性：清除自身紧邻其他元素的特效，使元素在浮动的过程中不去贴靠其他元素,只能影响自己,不能影响其他元素
    */
    div{
        height: 100px;
        width: 100px;
margin-right: 20px;
    }
    .one{
        border: 1px solid blue;
        float: right;
        clear: both;
    }
    .two{
        border: 1px solid red;
        float: right;
        clear: both;
    }
    .three{
        height: 100px;
        width: 100px;
        border: 1px solid greenyellow;
        float: right;
       /*不在紧贴 换行浮动*/
    }
</style>
<body>
<div class="one">第一个div元素</div>
<div class="two">第二个div元素</div>
<a href="" class="three">百度一下</a>
</body>
</html>